<script>
		$(function(){
			$('#dd1').click(function(){
				$('#sb1,#sb2').splitbutton({plain:false});
				$('#mb3').menubutton({plain:false});
			});
			$('#dd2').click(function(){
				$('#sb1,#sb2').splitbutton({plain:true});
				$('#mb3').menubutton({plain:true});
			});
		});
	</script>

<h2>分隔按钮 - SplitButton</h2>
<div class="demo-info">
  <div class="demo-tip icon-tip"></div>
  <div>和菜单按钮相似,分隔按钮包括链接按钮和菜单,但可以作为一个单独的按钮来使用。<br>
  </div>
</div>
<div style="margin:10px 0;"> <a href="javascript:void(0)" class="easyui-linkbutton" id="dd1">3D</a> <a href="javascript:void(0)" class="easyui-linkbutton" id="dd2">Plain</a> </div>
<div style="background:#C9EDCC;padding:5px;width:600px;"> <a href="javascript:void(0)" id="sb1" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'" onclick="javascript:alert('edit')">Edit</a> <a href="javascript:void(0)" id="sb2" class="easyui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a> <a href="javascript:void(0)" id="mb3" class="easyui-menubutton" data-options="menu:'#mm3',iconCls:'icon-help'">Help</a> </div>
<div id="mm1" style="width:150px;">
  <div data-options="iconCls:'icon-undo'">Undo</div>
  <div data-options="iconCls:'icon-redo'">Redo</div>
  <div class="menu-sep"></div>
  <div>Cut</div>
  <div>Copy</div>
  <div>Paste</div>
  <div class="menu-sep"></div>
  <div> <span>Toolbar</span>
    <div style="width:150px;">
      <div>Address</div>
      <div>Link</div>
      <div>Navigation Toolbar</div>
      <div>Bookmark Toolbar</div>
      <div class="menu-sep"></div>
      <div>New Toolbar...</div>
    </div>
  </div>
  <div data-options="iconCls:'icon-remove'">Delete</div>
  <div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
  <div data-options="iconCls:'icon-ok'">Ok</div>
  <div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>
<div id="mm3" style="width:150px;">
  <div>Help3</div>
  <div class="menu-sep"></div>
  <div>About3</div>
</div>
<h3>页面代码： </h3>
<pre name="code" class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
	&lt;title&gt;SplitButton - jQuery EasyUI Demo&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/default/easyui.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/icon.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;demo.css&quot;&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
	&lt;script&gt;
		$(function(){
			$('#dd1').click(function(){
				$('#sb1,#sb2').splitbutton({plain:false});
				$('#mb3').menubutton({plain:false});
			});
			$('#dd2').click(function(){
				$('#sb1,#sb2').splitbutton({plain:true});
				$('#mb3').menubutton({plain:true});
			});
		});
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h2&gt;分隔按钮 - SplitButton&lt;/h2&gt;
	&lt;div class=&quot;demo-info&quot;&gt;
		&lt;div class=&quot;demo-tip icon-tip&quot;&gt;&lt;/div&gt;
		&lt;div&gt;和菜单按钮相似,分隔按钮包括链接按钮和菜单,但可以作为一个单独的按钮来使用。&lt;br&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;div style=&quot;margin:10px 0;&quot;&gt;
		&lt;a href=&quot;javascript:void(0)&quot; class=&quot;easyui-linkbutton&quot; id=&quot;dd1&quot;&gt;3D&lt;/a&gt;
		&lt;a href=&quot;javascript:void(0)&quot; class=&quot;easyui-linkbutton&quot; id=&quot;dd2&quot;&gt;Plain&lt;/a&gt;
	&lt;/div&gt;
	&lt;div style=&quot;background:#C9EDCC;padding:5px;width:600px;&quot;&gt;
		&lt;a href=&quot;javascript:void(0)&quot; id=&quot;sb1&quot; class=&quot;easyui-splitbutton&quot; data-options=&quot;menu:'#mm1',iconCls:'icon-edit'&quot; onclick=&quot;javascript:alert('edit')&quot;&gt;Edit&lt;/a&gt;
		&lt;a href=&quot;javascript:void(0)&quot; id=&quot;sb2&quot; class=&quot;easyui-splitbutton&quot; data-options=&quot;menu:'#mm2',iconCls:'icon-ok'&quot; onclick=&quot;javascript:alert('ok')&quot;&gt;Ok&lt;/a&gt;
		&lt;a href=&quot;javascript:void(0)&quot; id=&quot;mb3&quot; class=&quot;easyui-menubutton&quot; data-options=&quot;menu:'#mm3',iconCls:'icon-help'&quot;&gt;Help&lt;/a&gt;
	&lt;/div&gt;
	&lt;div id=&quot;mm1&quot; style=&quot;width:150px;&quot;&gt;
		&lt;div data-options=&quot;iconCls:'icon-undo'&quot;&gt;Undo&lt;/div&gt;
		&lt;div data-options=&quot;iconCls:'icon-redo'&quot;&gt;Redo&lt;/div&gt;
		&lt;div class=&quot;menu-sep&quot;&gt;&lt;/div&gt;
		&lt;div&gt;Cut&lt;/div&gt;
		&lt;div&gt;Copy&lt;/div&gt;
		&lt;div&gt;Paste&lt;/div&gt;
		&lt;div class=&quot;menu-sep&quot;&gt;&lt;/div&gt;
		&lt;div&gt;
			&lt;span&gt;Toolbar&lt;/span&gt;
			&lt;div style=&quot;width:150px;&quot;&gt;
				&lt;div&gt;Address&lt;/div&gt;
				&lt;div&gt;Link&lt;/div&gt;
				&lt;div&gt;Navigation Toolbar&lt;/div&gt;
				&lt;div&gt;Bookmark Toolbar&lt;/div&gt;
				&lt;div class=&quot;menu-sep&quot;&gt;&lt;/div&gt;
				&lt;div&gt;New Toolbar...&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div data-options=&quot;iconCls:'icon-remove'&quot;&gt;Delete&lt;/div&gt;
		&lt;div&gt;Select All&lt;/div&gt;
	&lt;/div&gt;
	&lt;div id=&quot;mm2&quot; style=&quot;width:100px;&quot;&gt;
		&lt;div data-options=&quot;iconCls:'icon-ok'&quot;&gt;Ok&lt;/div&gt;
		&lt;div data-options=&quot;iconCls:'icon-cancel'&quot;&gt;Cancel&lt;/div&gt;
	&lt;/div&gt;
	&lt;div id=&quot;mm3&quot; style=&quot;width:150px;&quot;&gt;
		&lt;div&gt;Help3&lt;/div&gt;
		&lt;div class=&quot;menu-sep&quot;&gt;&lt;/div&gt;
		&lt;div&gt;About3&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>